<template>
  <div class="cesium-tools-widgets" :style="{ right: threeWidth + 40 + 'px' }">
    <!-- <div class="tools-widgets-header">
      <div><i class="dx-gongju2" /><span>工具栏</span></div>
      <div><i class="el-icon-close" @click="closeWidget" /></div>
    </div> -->
    <div class="tools-widgets-body">
      <ToolsWidgets
        v-for="item in toolsWidgetstList"
        :key="item.title"
        :config-data="item"
      />
    </div>
    <!-- <div class="tools-widgets-footer">
    </div> -->
  </div>
</template>

<script>
import ToolsWidgets from "@/cesiumWidgets/CesiumToolsWidgets/ToolsWidgets.vue";
import { mapState } from "vuex";
export default {
  name: "CesiumToolsWidgets",
  computed: {
    ...mapState({
      threeWidth: (state) => state.app.threeWidth, // three模型全屏展示
    }),
  },
  components: {
    ToolsWidgets,
  },
  data() {
    return {
      toolsWidgetstList: [
        {
          title: "测量工具",
          toolsList: [
            {
              icon: "dx-tiediceliang",
              name: "贴地测量",
              handle: "handleStickMeasure",
              backgroundColor: "#DB7093",
              handleType: "measureTool",
            },
            // {
            //   icon: "dx-kongjianceliang",
            //   name: "空间测量",
            //   handle: "handleSpatialMeasurement",
            //   backgroundColor: "#C71585",
            //   handleType: "measureTool",
            // },
            {
              icon: "dx-mianji1",
              name: "面积测量",
              handle: "handleAreaSpace",
              backgroundColor: "#8B008B",
              handleType: "measureTool",
            },
            {
              icon: "dx-zuobiao",
              name: "坐标拾取",
              handle: "handlePickCoordinate",
              backgroundColor: "#483D8B",
              handleType: "measureTool",
            },
            {
              icon: "dx-zhudongwajue",
              name: "透明地球",
              handle: "handleTransparentEarth",
              backgroundColor: "#4169E1",
              handleType: "systemTool",
            },
            // {
            //   icon: "dx-zuobiaodingwei",
            //   name: "坐标定位",
            //   handle: "handleFixPosition",
            //   backgroundColor: "#4169E1",
            //   handleType: "measureTool",
            // },
            // {
            //   icon: "dx-zhijiaoceliang",
            //   name: "三角测量",
            //   handle: "handleTrigonometricSurvey",
            //   backgroundColor: "#4169E1",
            //   handleType: "measureTool",
            // },
          ],
        },
        // {
        //   title: "分析工具",
        //   toolsList: [
        //     {
        //       icon: "dx-Square1x",
        //       name: "剖面提取",
        //       handle: "handleStickMeasure1",
        //       backgroundColor: "#CD853F",
        //       handleType: "analyseTool",
        //     },
        //     {
        //       icon: "dx-dixingkaiwa-",
        //       name: "地形开挖",
        //       handle: "handleGeologicalExcavation",
        //       backgroundColor: "#A52A2A",
        //       handleType: "analyseTool",
        //     },
        //     {
        //       icon: "dx-fenpingduibi",
        //       name: "分屏显示",
        //       handle: "handleStickMeasure3",
        //       backgroundColor: "#8B3A3A",
        //       handleType: "analyseTool",
        //     },
        //     {
        //       icon: "dx-wakuang",
        //       name: "钻孔提取",
        //       handle: "handleTurnHole",
        //       backgroundColor: "#8B3A3A",
        //       handleType: "analyseTool",
        //     },
        //     {
        //       icon: "dx-rongqibaozha",
        //       name: "地层爆炸",
        //       handle: "handleTurnHole2",
        //       backgroundColor: "#8B3A3A",
        //       handleType: "analyseTool",
        //     },
        //   ],
        // },
        // {
        //   title: "系统工具",
        //   toolsList: [
        //     {
        //       icon: "dx-moxing",
        //       name: "模型加载",
        //       handle: "handleAddModles",
        //       backgroundColor: "#00688B",
        //       handleType: "systemTool",
        //     },
        //   ],
        // },
      ],
    };
  },
  methods: {
    closeWidget() {
      this.$bus.emit("cesiumBusEvent", "toolsWidgets");
    },
  },
};
</script>

<style lang="scss" scoped>
.cesium-tools-widgets {
  width: 160px !important;
  height: 160px !important;
  position: fixed;
  right: 40px;
  bottom: 110px !important;
  z-index: 100000;
  background-color: rgba(0, 0, 0, 0.618);
  box-sizing: border-box;
  box-shadow: 0 0 4px #fff, 0 0 4px #fff inset;
  border-radius: 8px;
  padding: 4px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  .tools-widgets-header {
    width: 100%;
    height: 40px;
    min-height: 40px;
    // border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div > span {
      margin-left: 10px;
      letter-spacing: 2px;
    }
    .el-icon-close {
      transition: all 0.6s;
      transform: scale(1);
      cursor: pointer;
    }
    .el-icon-close:hover {
      transform: scale(2);
    }
  }
  .tools-widgets-body {
    flex: 1;
    width: 100%;
    // padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }
  .tools-widgets-footer {
    width: 100%;
    height: 60px;
    min-height: 60px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .footer-title {
      width: 32px;
      font-size: 12px;
    }
  }
}
</style>
